<template>
	<div>
		<el-table :data="searchs(search)" v-loading="loading" style="width: 100%" max-height="580">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="用户邮箱:">
							<a :href="`mailto:${props.row.email}`">{{ props.row.email }}</a>
						</el-form-item>
						<el-form-item label="是否员工:">
							<span>{{ props.row.is_staff?'是':'否' }}</span>
						</el-form-item>
						<el-form-item label="活跃状态:">
							<span>{{ props.row.is_active?'是':'否' }}</span>
						</el-form-item>
						<el-form-item label="性别:">
							<span>{{ props.row.sex?'男':'女' }}</span>
						</el-form-item>
						<el-form-item label="年龄:">
							<span>{{ props.row.age }}</span>
						</el-form-item>
						<el-form-item label="头像:">
							<span style="display:inline-block;width:50px;height:50px;">
								<img style="width:100%;height:100%" :src="props.row.icon" alt />
							</span>
						</el-form-item>
						<el-form-item label="所属分组:">
							<span v-for="(item, index) in props.row.groups" :key="index">[ {{ item.name }} ]</span>
						</el-form-item>
						<el-form-item label="拥有权限:">
							<span v-for="(item, index) in props.row.user_permissions" :key="index">[ {{ item.name }} ]</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="ID" sortable width="80" prop="id"></el-table-column>
			<el-table-column align="center" width="140" label="用户名" prop="username"></el-table-column>
			<el-table-column align="center" sortable width="140" label="上次登陆" prop="last_login">
				<template slot-scope="scope">
					<span>{{scope.row.last_login | alltime}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" sortable width="140" label="注册日期" prop="date_joined">
				<template slot-scope="scope">
					<span>{{scope.row.date_joined | alltime}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="电话" prop="mobile"></el-table-column>
			<el-table-column align="center" label="部门">
				<template slot-scope="scope">
					<span>{{scope.row.depar==null?'':scope.row.depar.depar_name }}</span>
				</template>
			</el-table-column>
			<el-table-column align="left" width="200">
				<template slot="header" slot-scope="scope">
					<div style="display:flex;">
						<span style="dispaly:none">{{scope.row}}</span>
						<el-input v-model="search" size="mini" placeholder="输入用户名搜索" />
					</div>
				</template>
				<template slot-scope="scope">
					<el-popover placement="top" width="160" v-model="scope.row.color">
						<p>这是一个正在禁用的账号,确定启用吗？</p>
						<div style="text-align: right; margin: 0">
							<el-button size="mini" type="text" @click="scope.row.color = false">取消</el-button>
							<el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">确定</el-button>
						</div>
						<el-button
							slot="reference"
							size="mini"
							type="primary"
						>启用</el-button>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			search: "",
			tableData: [],
			can_saveit: true,
			loading: false
		};
	},
	methods: {
		// 搜索功能
		searchs(kw) {
			let searchingList = [];
			this.tableData.forEach(item => {
				if (item.username.indexOf(kw) != -1) {
					searchingList.push(item);
				}
			});
			return searchingList;
		},
		// 获取用户列表
		get_user_list() {
			this.$ajax
				.get("/user")
				.then(res => {
					let arr = [];
					res.data.results.forEach(item => {
						if (!item.is_active) {
							arr.push(item);
						}
					});
					this.tableData = arr;
					let that = this;
					setTimeout(function() {
						that.loading = false;
					}, 200);
				})
				.catch(err => {});
		},
		// ccommon
		get_ids(arr) {
			let res = null;
			if (arr) {
				res = [];
				if (arr.length > 0) {
					arr.forEach(item => {
						res.push(item.id);
					});
				}
			}
			console.log(res);
			return res;
		},
		// 启用
		handleEdit(index, item) {
			// username mobile email is_superuser is_active is_staff depar groups user_permissions
			let form = new FormData();
			form.append("username", item.username);
			form.append("email", item.email);
			form.append("mobile", item.mobile);
			if (this.is_admin) {
				form.append("is_superuser", item.is_superuser);
				form.append("is_staff", item.is_staff);
				form.append("is_active", true);
				item.groups = this.get_ids(item.groups);
				item.depar = this.get_ids(item.depar);
				item.user_permissions = this.get_ids(item.user_permissions);
				if (item.groups) {
					if (item.groups.length != 0) {
						item.groups.forEach(items=>{
							form.append("groups", items);
						});
					}
				}
				if (item.depar) {
					if (item.depar.length != 0) {
						item.depar.forEach(items=>{
							form.append("depar", items);
						})
					}
				}
				if (item.user_permissions) {
					if (item.user_permissions.length != 0) {
						item.user_permissions.forEach(items=>{
							form.append("user_permissions", items);
						})
					}
				}
			}
			this.$ajax
				.put("/user/" + item.id + "/", form)
				.then(res => {
					this.tableData.splice(index,1)
					this.$message({
						message: "操作成功",
						type: "success"
					});
					item.color = false;
				})
				.catch(err => {
					this.$message({
						message: "操作失败",
						type: "info"
					});
				});
		}
	},
	mounted() {
		this.loading = true;
		this.get_user_list();
		this.user_infos = JSON.parse(window.localStorage.getItem("user"));
		if (this.user_infos.groups.length > 0) {
			this.user_infos.groups.forEach(item => {
				if (item.name == "管理员") {
					this.is_admin = true;
					return false;
				}
			});
		}
	}
};
</script>


<style lang="scss" scoped>
.demo-table-expand {
	font-size: 0;
}
.demo-table-expand label {
	width: 90px;
	color: #99a9bf;
}
.demo-table-expand .el-form-item {
	margin-right: 0;
	margin-bottom: 0;
	width: 50%;
}
</style>